<template>
    <div class="student-select">
        <div v-show="studentList.length" class="select-student">
            <span>请选择学生</span>
            <div class="student-list" @click="selectStudent">
                <span>{{showName}}</span>
                <img src="../../assets/img/back1.png" :class="{ down : showStudents}" />
            </div>
        </div>
        <div class="student-list-mask" v-show="showStudents" @click="selectStudent">
            <ul class="student-list-ul list-ul">
                <li v-for="item in studentList" @click='oneStudent(item)' :class="{selected : showName == item.studentName}">
                    <em>{{item.studentName}}</em>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import io from '../../lib/io'
export default {
  name: 'mycourse',
  components: {
  },
  data: function () {
    return {
        studentList: [],
        showName:'',
        showStudents:false
    }
  },
  created(){
    this.loadStudent();
  },
  methods:{
        selectStudent() {
            if(this.showStudents){
                document.querySelector(".list-ul").classList.remove("final-height");
                document.querySelector(".list-ul").classList.add("off-height");
                setTimeout(() => {
                    this.closeBlockFunc();
                }, 400);
            }else{
                this.showStudents = true;
                this.$nextTick(() => {
                    document.querySelector(".list-ul").classList.remove("off-height");
                    document.querySelector(".list-ul").classList.add("final-height");
                });
            }
        },
        closeBlockFunc(){
            this.showStudents = false;
        },
        oneStudent(item) {
            this.showName = item.studentName;
            this.showId = item.studentId;
            this.showName&&sessionStorage.setItem('courseShowName', JSON.stringify({ showName: this.showName, showId: this.showId }))
            this.$emit('changeStudent',this.showId);
            
            this.selectStudent();
        },
        loadStudent() {
            var _this = this
            io.post(io.findCustomerBindStudent, {}, function(data) {
                if (data.success) {
                    _this.studentList = data.data;
                    if (data.data.length) {
                        if(sessionStorage.getItem('courseShowName')){
                            let studentObj = JSON.parse(sessionStorage.getItem('courseShowName'));
                            let showName = studentObj.showName;
                            let showId = studentObj.showId;
                            let isBelong = false
                            data.data.forEach(val => {
                                if (showId === val.studentId) {
                                    isBelong = true
                                    return false
                                }
                            })
                            if (isBelong) {
                                _this.showId = showId
                                _this.showName = showName
                                sessionStorage.setItem('courseShowName', JSON.stringify({ showName: showName, showId: showId}))
                            } else {
                                _this.showId = data.data[0].studentId
                                _this.showName = data.data[0].studentName
                            }
                        }else{
                            _this.showName=data.data[0].studentName;
                            _this.showId=data.data[0].studentId;
                        }
                        _this.showName&&sessionStorage.setItem('courseShowName', JSON.stringify({ showName: _this.showName, showId: _this.showId }));

                         _this.$emit('changeStudent',_this.showId,_this.studentList);
                    }

                } else {
                    alert(data.desc)
                }
            })
        },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    @import '../../assets/css/common/SelectStudent.less';
</style>
